<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" class="search-form" inline>
        <Form-item label="物资名称：" prop="title">
          <Input
            v-model="searchForm.title"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item label="供货商：" prop="supplier">
          <Input
            v-model="searchForm.supplier"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item style="margin-left:-90px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <!-- <Button v-on:click="toAdd" target="_self" type="primary" icon="ios-add">添加</Button> -->
      <!-- <Button @click="delAll" type="error" icon="md-trash">删除</Button> -->
    </div>
    <div class="table">
      <!-- <Row>
        <Alert show-icon>
          已选择 <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>-->
      <Row>
        <Table
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
          border
          size="small"
          @on-selection-change="showSelect"
        >
          <template slot="action" slot-scope="{ row, index }">
            <!-- <a class="edit" style="color:#2d8cf0;font-size: 12px;" type="text" size="small" @click="edit(row)">
              编辑
            </a>
            <Divider type="vertical"/>-->
            <!-- <a class="del" style="color:#ed4014;font-size: 12px;" @click="del(row)">删除</a> -->
          </template>
        </Table>
      </Row>
      <!-- <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          @on-change="changePage"
          show-total
        />
      </Row> -->
    </div>
  </Card>
</template>
<script>
import {delMaterial, materialList} from '../../../api/material'

export default {
  data() {
    return {
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        title: '',
        supplier: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      columns: [
        // {
        //   type: "index",
        //   width: 60,
        //   align: "center",
        //   fixed: "left"
        // },
        {
          title: '物资名称',
          key: 'title',
          width: 200,
          align: 'left',
          fixed: 'left'
        },
        {
          title: '供应商',
          key: 'supplier',
          width: 200,
          align: 'left'
        },
        {
          title: '规格',
          key: 'specs',
          width: 150,
          align: 'left'
        },
        {
          title: '单位',
          key: 'unit_title',
          width: 80,
          align: 'center'
        },
        {
          title: '单价',
          key: 'price',
          width: 100,
          align: 'right'
        },
        {
          title: '数量',
          key: 'amount',
          width: 80,
          align: 'right'
        },
        {
          title: '总价',
          key: 'total_price',
          width: 100,
          align: 'right'
        },
        // {
        //   title: '备注',
        //   key: 'remark',
        //   width: 150,
        //   align: 'left',
        // },
        {
          title: '入库时间',
          key: 'created_at',
          width: 200,
          align: 'right'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 120,
        //   fixed: 'right',
        //   align: 'center'
        // }
      ],
      data: []
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'material') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getMaterialList()
      // this.clearSelectAll();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          delMaterial(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getMaterialList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          delMaterial(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getMaterialList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editMaterial',
        params: {
          id: row.id
        }
      })
    },
    getMaterialList() {
      this.loading = true
      // this.clearSelectAll();
      materialList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getMaterialList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getMaterialList()
    },
    init() {
      this.getMaterialList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.$router.push({
        name: 'addMaterial'
      })
    }
  }
}
</script>
